<template>
	<view class="index w-full flex flex-col items-center" style="color: #636363;">
		<view class="flex my-2 items-center px-4 gap-8 w-full box-border" style="min-height: 58px;background-color: rgb(18, 18, 18);">
			<image src="/static/images/bibi/BTC.png" style="width: 26px;height: 26px;"></image>
			<view class="text-white">BTC/USDT</view>
			<view class="red2 mx-4 text-sm">
				<view >103665.79</view>
				<view >-1.72%</view>
			</view>
			<view class="text-sm">
				<view >24h {{$t('bibi.zuigaojia')}}</view>
				<view class="red2">107095.94</view>
			</view>
			<view class="text-sm">
				<view >24h {{$t('bibi.zuidijia')}}</view>
				<view class="red2">107095.94</view>
			</view>
			<view class="text-sm">
				<view >24h {{$t('bibi.chengjiaoliang')}}(USDT)</view>
				<view class="red2">107095.94</view>
			</view>
		</view>
		<view class="flex w-full gap-4">
			<view class="center-bg" style="flex: 1;">
				<leftContent></leftContent>
			</view>
			<view style="flex: 2;" class="flex flex-col gap-4">
				<view class="center-bg">
					<tradingView></tradingView>
				</view>
				<view class="center-bg">
					<centerShiJia></centerShiJia>
				</view>
			</view>
			<view style="flex: 1;" class="flex flex-col gap-4">
				<view class="center-bg">
					<rightContent></rightContent>
				</view>
				<view class="center-bg">
					<rightBottom></rightBottom>
				</view>
			</view>
		</view>
		
		<view class="w-full center-bg mt-2">
			<bottomContent></bottomContent>
		</view>
		
		
		<view class="center-bg w-full flex justify-center mt-2">
			<footerPage></footerPage>
		</view>
	</view>
</template>

<script>
	import leftContent from './components/leftContent/leftContent.vue'
	import tradingView from './components/tradingView/tradingView.vue'
	import centerShiJia from './components/centerShiJia/centerShiJia.vue'
	import rightContent from './components/rightContent/rightContent.vue'
	import rightBottom from './components/rightBottom/rightBottom.vue'
	import bottomContent from './components/bottomContent/bottomContent.vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {}
		},
		components:{
			leftContent,
			tradingView,
			centerShiJia,
			rightContent,
			rightBottom,
			bottomContent
		},
		computed: {
			...mapState({
				mode:state=>state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		methods: {
			// 点击表格按钮
			clickBtn(row,index){
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.center-bg{
		background-color: #121212;
	}
</style>